<template>
  <div class="loginwrap">
    <h1>疾速外卖</h1>
   


    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div class="loginform">
        <span>用户名</span>
        <el-input
          v-model="ruleForm.username"
          placeholder="请输入内容"
          style="width: 300px; margin-bottom: 20px"
        ></el-input
        ><br />
        <span>密&emsp;码</span>
        <el-input
          placeholder="请输入密码"
          v-model="ruleForm.userpwd"
          show-password
          style="width: 300px"
        ></el-input>
        <div class="login">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >登录</el-button
          >
          <el-button type="primary" @click="resetForm('ruleForm')"
            >注册</el-button
          >
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import userModel from "../../model/userinfoModel";
export default {
  data() {
    return {
      radio: "1",
      ruleForm: {
        username: "",
        userpwd: "",
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10个字符", trigger: "blur" },
        ],
        userpwd: [
          { required: true, message: "密码不能为空", trigger: "change" },
          {
            pattern: /^[a-z0-9]{3,12}$/i,
            message: "密码只能是数字或者字母长度3到12位",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          //表示的是验证成功
          //判断用户名和密码是否能够登录成功
          let { data } = await userModel.query({
            username: this.ruleForm.username,
            userpwd: this.ruleForm.userpwd,
          });
          if (data.code) {
            window.localStorage.setItem("token", data.data.token);
            window.localStorage.setItem("username", data.data.username);
            this.$router.push("/ds/" + data.data.path);
            this.$message({
              showClose: true,
              message: "登录成功",
              type: "success",
            });
          } else {
            this.$message({
              showClose: true,
              message: "登录失败",
              type: "error",
            });
          }
        } else {
          //验证失败
          this.$message({
            showClose: true,
            message: "表单信息有误,请检查后重试",
            type: "error",
          });
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$router.push("register");
    },
  },
};
</script>

<style scoped>
.loginwrap {
  height: 100vh;
  background: url("../../assets/bg.jpg") no-repeat;
  background-size: cover;
}
h1 {
  padding-top: 120px;
  text-align: center;
  color: #de9141;
}
.loginform {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.el-button--primary {
  text-align: center;
  margin-top: 20px;
  margin-left: 80px;
}
.tit {
  text-align: center;
  margin-top: 10px;
}
.el-radio__inner {
  background-color: blue;
}
.el-radio {
  color: blue;
}
</style>
